<template>

    <div>
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="filters">
                <el-form-item>
                    <el-input v-model="filters.name" placeholder="部门名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <!--
        v-for="变量名 in 数据源"  -- 遍历
        :label :展示的列表
        :value :获取的值
        -->
                    <el-select v-model="filters.managerId" clearable placeholder="请选择项目经理">
                        <el-option
                                v-for="item in managers"
                                :label="item.username"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <!--
        v-for="变量名 in 数据源"  -- 遍历
        :label :展示的列表
        :value :获取的值,传递到后台的
        -->
                    <el-select v-model="filters.parentId" clearable placeholder="请选择父级部门">
                        <el-option
                                v-for="item in parentDepts"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" v-on:click="getDeptList">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleAdd">新增</el-button>
                </el-form-item>
            </el-form>
        </el-col>
    <el-table :data="deptList" highlight-current-row v-loading="listLoading" @selection-change="selsChange"
              style="width: 100%;">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column type="index" width="60" label="编号">
        </el-table-column>
        <el-table-column prop="name" label="部门名称" width="120" sortable>
        </el-table-column>
        <el-table-column prop="state" label="状态" width="100" sortable>
            <template slot-scope="scope">
                <el-button type="text" size="small"
                           :type="scope.row.state ==0?'danger':'primary'">
                    {{scope.row.state === 0 ? "禁用" : "启用"}}
                </el-button>
            </template>
        </el-table-column>
        <el-table-column prop="sn" label="部门编号" width="100" sortable>
        </el-table-column>
        <el-table-column prop="managerName" label="部门经理" width="100" sortable>
        </el-table-column>
        <el-table-column prop="parentName" label="上级部门" width="100" sortable>
        </el-table-column>
        <el-table-column label="操作" width="150">
            <template slot-scope="scope">
                <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button type="danger" size="small" @click="handleDel(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
        <!--工具条-->
        <el-col :span="24" class="toolbar">
            <el-button type="danger" :disabled="this.sels.length===0" @click="delBatch">批量删除</el-button>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-col>
        <!--新增和修改的模态框-->
        <el-dialog title="操作" :visible.sync="addFormVisible" :close-on-click-modal="false">
            <el-form :model="addForm" label-width="80px"  ref="addForm">
                <el-form-item label="部门名称" prop="name">
                    <el-input v-model="addForm.name" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="部门编号" prop="sn">
                    <el-input v-model="addForm.sn" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="部门状态" prop="state">
                    <el-switch
                            style="display: block"
                            v-model="state"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            active-text="启用"
                            inactive-text="禁用">
                    </el-switch>
                </el-form-item>
                <el-form-item label="部门经理" prop="slkdjfsdkljfdkslf">
                    <!--
                        v-model：双向绑定
                        employees ：数据源  item：实例
                    -->
                    <el-select v-model="addForm.managerId" clearable placeholder="请选择">
                        <el-option
                                v-for="item in employees"
                                :key="item.id"
                                :label="item.username"
                                :value="item.id">
                        </el-option>
                </el-select>
                </el-form-item>
                <el-form-item label="上级部门" prop="slkdjfsdkljfdkslf">
                <el-cascader
                        v-model="addForm.parentIds"
                        :options="treeDept"
                        :props="{ checkStrictly: true,value:'id',label:'name' }"
                        clearable></el-cascader>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="addFormVisible = false">取消</el-button>
                <el-button type="primary" @click.native="addSubmit">提交</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>

    export default {
        data() {
            return {
                //经理们，作为高级查询的条件
                managers:[],
                //上级部门们
                parentDepts:[],
                filters: {
                    name: '',			// 部门名称
                    managerId: null,		// 项目经理id
                    parentId: null       // 父级部门id
                },
                addFormVisible: false,   // 模态框的显示和关闭
                state: true,  // 部门状态
                /*表单的值通过v-model双向绑定，页面填写的值这里自动设置进去*/
                addForm: {
                    //state:true,
                    name: "",
                    sn: "",
                    managerId: "",
                    //上级部门的层级数据
                    parentIds: []
                },
                //上级部门集合
                treeDept:[],
                //员工集合
                employees:[],
                deptList: [],               // 部门数据
                listLoading: false,         // 页面加载动画
                selects: [],    // 多选数据
                pageNum: 1,     // 默认页码
                pageSize: 5,   // 默认每页显示条数
                total: 0,       // 分页条数
                sels:[]
            }
        },
        methods:{
            selsChange(rows){
                console.log(rows)

                //赋值
                this.sels = rows;
            },

            //批量删除的方法
            delBatch(){


                //方式1
                // let ids = new Array()
                // for (let i = 0; i < rows.length; i++) {
                //     ids.push(rows[i].id)
                // }

                //方式2 两种方式都可以  推荐
                let ids = this.sels.map(item=>item.id);

                console.log(ids)
                let para = {"ids":ids}
                //发送请求到后台
                this.$http.post("/dept/batchDelete",para).then(res =>{
                    console.log(res)
                    if (res.data.success){
                        //成功刷新列表
                        this.getDeptList()
                    }else{
                        this.$message.error(res.data.message);
                    }
                })

            },
            //盲猜就是修改按钮点击
            handleEdit(index,row){
                console.log(row)
                //1.显示模态框
                this.addFormVisible = true
                //2.回显数据
                this.addForm = Object.assign({},row);

                //3.负负得正
                console.log(row.state) //0
                console.log(!row.state) //true
                console.log(!!row.state) //false
                this.state = !!row.state;

                //1.拿到dirPath "/3/8/10/38"
                let dirPath = row.dirPath;
                if (dirPath){
                    console.log(dirPath)
                    //2.把它变成数组
                    let paths = dirPath.split("/");
                    console.log(paths)
                    //3.掐头去尾
                    paths = paths.slice(1,paths.length-1)
                    console.log(paths)
                    //4.把字符串数组转换成数字数组
                    paths = paths.map(Number);
                    console.log(paths)
                    //回显上级部门
                    this.addForm.parentIds = paths
                    //this.addForm.parentIds = [3,8,10]
                }

            },
            //点击新增按钮
            handleAdd(){
                //1.显示模态框
                this.addFormVisible = true
                //2.需要清空数据
                this.addForm = {}
                //3.回显为启用
                this.state = true;

            },
            //新增或者修改
            addSubmit(){

                console.log(this.addForm.parentIds) //Array(3) [ 3, 8, 10 ]

              //新增一个属性，赋值
              this.addForm.state = this.state ? 1 : 0;

              this.$http.post("/dept",this.addForm).then(res=>{
                  //1.隐藏模态框
                  this.addFormVisible = false
                  console.log(res)
                  if (res.data.success){
                      //成功刷新列表
                      this.getDeptList()
                  }else{
                      this.$message.error(res.data.message);
                  }
              })

            },
            getDeptList(num){

                if (num === 1 && this.total%this.pageSize ===1){
                    this.pageNum = this.pageNum - 1;
                }


                //查询条件
                let para = {
                    currentPage:this.pageNum ? this.pageNum : 1,
                    pageSize: this.pageSize,
                    managerId: this.filters.managerId,
                    name : this.filters.name,
                    parentId: this.filters.parentId
                }

                //发送axios请求
                this.$http.post("/dept/findPage",para).then(res=>{
                    console.log(res)

                    //部门列表数据赋值
                    this.deptList = res.data.list;
                    this.total = res.data.total

                    console.log(res.data.list)
                    console.log(res.data.total)
                })
            },
            handleSizeChange(mySize){
                //alert(mySize)
                //1.赋值
                this.pageSize = mySize;

                //2.触发分页方法
                this.getDeptList();
            },
            handleCurrentChange(myPage){
                //alert(myPage)
                //1.赋值
                this.pageNum = myPage;

                //2.触发分页方法
                this.getDeptList();
            },

            handleDel(row){
                console.log(row)
                //发送请求到后台
                this.$http.delete("/dept/"+row.id).then(res=>{
                    console.log(res)
                    if (res.data.success){
                        //成功刷新列表
                        this.getDeptList(1)
                    }else{
                        this.$message.error("删除异常，联系高昂");
                    }
                })
            },
            //查询所有的员工
            getEmployees(){
                this.$http.get("/emp").then(res =>{
                    //赋值
                    this.employees = res.data.data
                })
            },
            //拿到后台的数据
            getDeptTree(){
                this.$http.get("/dept/treeList").then(res=>{
                    console.log("11111111111111111")
                    console.log(res)
                    this.treeDept = res.data.data
                    console.log("11111111111111111")
                })
            },
            getManagers(){
                this.$http.get("/emp/managers").then(res=>{
                    this.managers = res.data.data
                })
            },
            getParentDepts(){
                this.$http.get("/dept/parentDepts").then(res=>{
                    this.parentDepts = res.data.data
                })
            }
        },
        // 页面一加载就会执行钩子函数的中的方法
        mounted() {
            //查询所有的上级部门
            this.getParentDepts();

            //查询所有的部门经理们
            this.getManagers();

            /*
                分析：需要所有的员工的集合
                发送axios请求，获取就行了
            * */
            this.getEmployees();

            //拿到部门层级数据
            this.getDeptTree();

            //获取部门列表
            this.getDeptList();
        }
    }

</script>